﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ProductListControl.ascx.cs"
    Inherits="Controls_ProductListControl" %>
<hr class="space"/>

<script type='text/javascript'>
    $(document).ready(function () {
        $(".product-image img").hover(function () {
            //todo:dangle
            $(this).addClass('hover');
        }, function () {
            $(this).removeClass('hover');
        });
    });
</script>


    <asp:ListView ID="ListView1" runat="server" DataKeyNames="ProductId"  DataSourceID="Product_EntityDataSource">
    <LayoutTemplate>
        <div class="span-24">
            <div runat="server" id="itemPlaceholder"></div>
        </div>
    </LayoutTemplate>
    <ItemTemplate>
        <div class="span-7 push-2">
        <div class="banner-right">
            <div class="banner-right-top">
            </div>
            <div class="banner-right-mid">
                <div class="banner-right-new">
                    <img src="images/banner-right-new.png" alt="New">
                </div>
                <div class="home-top-area-right">
                    <a class="product-image" title="<%#Eval("Name") %>" href="#">
                        <img width="210" height="140" alt="<%#Eval("ShortDescription") %>" src="<%#Eval("ImageUrl") %>">
                    </a>
                    <br />
                    <span class="productName">
                        <%#Eval("Name") %>
                    </span>
                    <br />
                    <%#Eval("ShortDescription") %>
                    <br />
                    <span class="price">
                        <%#Eval("Price")%>$</span>
                </div>
            </div>
            <!-- banner-right-mid-->
            <div class="banner-right-bottom">
            </div>
        </div>
        </div>
    </ItemTemplate>
    </asp:ListView>
<hr class="space" />

<asp:EntityDataSource ID="Product_EntityDataSource" runat="server" 
    ConnectionString="name=WebLoBooEntities" 
    DefaultContainerName="WebLoBooEntities" EnableFlattening="False" 
    EntitySetName="Products">
</asp:EntityDataSource>
<asp:ListView ID="Products" runat="server" DataKeyNames="ProductId"  DataSourceID="Product_EntityDataSource">
    <LayoutTemplate>
        <ul class="products-grid">
            <li runat="server" id="itemPlaceholder"></li>
        </ul>
    </LayoutTemplate>
    <ItemTemplate>
        <li class="item"><a class="product-image"  title="<%#Eval("Name") %>" href="#">
            <img width="188"  alt="<%#Eval("ShortDescription") %>" src="<%#Eval("ImageUrl") %>">
        </a>
            <h3 class="product-name">
                <a title="<%#Eval("Name") %>" href="#">
                    <%#Eval("Name") %></a>
            </h3>
            <div class="price-box">
                <span id="product-price-43-new" class="regular-price"><span class="price">
                    <%#Eval("Price")%>$</span> </span>
            </div>
        </li>
    </ItemTemplate>
</asp:ListView>

